// ===== Slide mixins =====

=body-markdown-mode
  @media not print
    body:not(.slide-view):not(.to-pdf)
      @content

=body-slide-mode
  body.slide-view, body.to-pdf
    @content

  @media print
    body
      @content

=body-slide-preview
  @media not print
    body.slide-view
      @content

// ===== Slide CSS common =====

:root
  --slide-width: 1024
  --slide-height: 768
  --preview-margin: 20

$slideWidthPx: calc(1px * var(--slide-width))
$slideHeightPx: calc(1px * var(--slide-height))
$previewMarginPx: calc(1px * var(--preview-margin))

$previewWidth: calc(var(--screen-width) - var(--preview-margin) * 2)
$previewHeight: calc(var(--screen-height) - var(--preview-margin) * 2)
$previewWidthPx: calc(1px * #{$previewWidth})
$previewHeightPx: calc(1px * #{$previewHeight})

html, body
  height: 100%

body
  margin: 0

img.emoji
  height: 1em
  width: 1em
  margin: 0 .05em 0 .1em
  vertical-align: -0.1em
  background-color: transparent !important

#container, .slide_wrapper, .slide
  box-sizing: border-box

.slide_page, .slide_bg
  display: none

+body-markdown-mode
  #container
    padding: 30px 20px

+body-slide-mode
  page-break-inside: avoid

  #container
    padding: 0

  .slide_wrapper
    width: $slideWidthPx
    height: $slideHeightPx
    background: #fff
    position: relative
    overflow: hidden
    page-break-after: always

    > .slide
      display: flex
      flex-direction: column
      flex-wrap: nowrap
      align-items: stretch
      justify-content: flex-start

      box-sizing: border-box
      width: $slideWidthPx
      height: $slideHeightPx
      transform-origin: 0 0

      > .slide_inner
        position: relative
        z-index: 2

        > :first-child
          &, & > :first-child
            margin-top: 0 !important

        > :last-child
          &, & > :last-child
            margin-bottom: 0 !important

    .slide_page
      display: none
      position: absolute
      right: 30px
      bottom: 21px
      z-index: 10
      pointer-events: none

    &[data-page_number="true"]
      .slide_page
        display: block

    &[data-prerender="true"]
      -webkit-filter: blur(0)

    .slide_footer
      position: absolute
      left: 30px
      bottom: 21px
      z-index: 10
      pointer-events: none

    .slide_bg
      position: absolute
      left: 0
      top: 0
      right: 0
      bottom: 0
      display: flex
      z-index: 1

      .slide_bg_img
        flex: 1 1 auto
        background-size: cover
        background-repeat: no-repeat
        background-position: center center
        opacity: 0.4

        &[data-alt~="fit"]
          background-size: contain

        &[data-alt~="original"]
          opacity: 1

  .markdown-body
    img
      max-width: 100%

    img[alt~="center"]
      display: block
      margin: 0 auto

@media print
  body .slide_wrapper
    max-height: 100vh

+body-slide-preview
  background: #202020

  .slide_wrapper
    width: $previewWidthPx
    height: calc(#{$previewWidthPx} * var(--slide-height) / var(--slide-width))
    border: 1px solid #000
    box-shadow: 0 10px 30px #000

    > .slide
      transform: scale(calc(#{$previewWidth} / var(--slide-width)))

  &.screen
    .slide_wrapper
      position: absolute
      left: 50%
      top: 50%
      transform: translate(-50%, -50%)

    #container.height-base
      .slide_wrapper
        width: calc(#{$previewHeightPx} * var(--slide-width) / var(--slide-height))
        height: #{$previewHeightPx}

        > .slide
          transform: scale(calc(#{$previewHeight} / var(--slide-height)))

  &.list
    #container
      padding: $previewMarginPx 0

    .slide_wrapper
      margin: $previewMarginPx auto 0 auto !important

      &:first-child
        margin-top: 0 !important
